<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    jquery 封装 DOM 操作，DOM操作简单化

    <h1>111</h1>
    <h2>222</h2>

    <script src="jquery.min.js"></script>
    <script>
        //1.查找元素   $("选择器")---jq对象
        console.log($("h1"));
        $("h1").css("color","red");

        //DOM 操作和jQuery 操作不能混用
        // $("h1").style.backgroundColor="blue"

        //jq对象--》DOM对象  jq对象[index]  jq对象.get(index)
        // console.log($("h1")[0])
        // $("h1")[0].style.backgroundColor="blue"
        $("h1").get(0).style.backgroundColor="blue";

        //DOM对象--》jq对象  $(DOM对象)
        var h2box=document.querySelector("h2");
        console.log($(h2box));
        $(h2box).css("color","pink");
    </script>
</body>
</html>